<template>
  <layout-slot :reArticle="reArticle" className="archive-page main-content" class="bg-gray">
    <source-slot/>
    <div class="categorys-item" v-for="item of categories">
      <div class="categorys-title">
        <a :href="item.url">
          {{ item.name }}
        </a>
        <span> ：{{ item.articles.length }}</span>
      </div>
      <div class="post-lists">
        <div class="post-lists-body">
          <div class="post-list-item" v-for="tmp of item.articles">
            <div class="post-list-item-container">
              <a :href="tmp.url">
                <div class="item-label">
                  <div class="item-title">{{ tmp.name }}</div>
                  <div class="item-meta clearfix">
                    <div class="item-meta-date">{{tmp.date | dateFormat('{y}-{m}-{d}') }}</div>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </layout-slot>
</template>

<script>
  import { getCategory } from '~/api/category'
  import { getReArticle } from '~/api'

  export default {
    name: 'ArchivePage',
    data() {
      return {
        categories: [
        ],
        reArticle:[]
      }
    },
    props:{
      url:String,
    },
    async asyncData({app,params}){
      let categories = []
      await  getCategory(app.$axios,{type: params.url}).then(({data}) => {
        categories = data.data.map((item) => {
          let obj = {}
          obj.name = item.categoryTitle
          obj.url = item.categoryURI
          obj.articles = item.articles.map((tmp) => {
            if (tmp) {
              return {
                name: tmp.articleTitle,
                url: `/article-detail/${tmp.oId}`,
                date: tmp.articleCreated
              }
            }
          }).filter((m) => m)
          return obj
        })

      })
      let reArticle = await getReArticle(app)
      return {categories,reArticle}
    }
  }
</script>

<style scoped>

</style>
